<template name="ad_card_list">
  <view class="card-container">
    <!-- 顶部标题栏 -->
    <view class="card-header">
      <view class="header-content">
        <view class="header-left">
          <text class="page-title">名片列表</text>
          <text class="page-desc">管理所有用户名片信息</text>
        </view>
        <view class="header-actions">
          <view class="refresh-page-btn" @click="refreshPage">
            <text class="refresh-icon">🔄</text>
            <text class="refresh-text">刷新页面</text>
          </view>
          <view class="mini-stats">
            <view class="mini-stat">
              <text class="mini-number">{{total.totalCount}}</text>
              <text class="mini-label">发布</text>
            </view>
            <view class="mini-stat">
              <text class="mini-number">{{total.auditedCount}}</text>
              <text class="mini-label">审核</text>
            </view>
            <view class="mini-stat">
              <text class="mini-number">{{total.stickyCount}}</text>
              <text class="mini-label">置顶</text>
            </view>
            <view class="mini-stat">
              <text class="mini-number">{{total.viewCount}}</text>
              <text class="mini-label">浏览</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 列表表头 -->
    <view class="list-header">
      <text class="header-col avatar">头像</text>
      <text class="header-col user">用户信息</text>
      <text class="header-col intro">介绍</text>
      <text class="header-col time">发布时间</text>
      <text class="header-col status">状态</text>
      <text class="header-col actions">操作</text>
    </view>

    <!-- 名片列表 -->
    <view class="cards-list" v-if="cards.list.length > 0">
      <view 
        v-for="(card, index) in cards.list" 
        :key="card.id"
        class="list-item"
      >
        <!-- 头像 -->
        <view class="list-col avatar">
          <image class="user-avatar" :src="card.user_img" mode="aspectFill" />
        </view>

        <!-- 用户信息 -->
        <view class="list-col user">
          <text class="user-nickname">{{card.username}}</text>
          <text class="user-wechat">微信号: {{card.wechat_id}}</text>
        </view>

        <!-- 介绍内容 -->
        <view class="list-col intro">
          <text class="intro-text" :class="{expanded: !card.collapsed}">
            {{card.content}}
          </text>
          <text 
            class="toggle-expand" 
            @tap="toggleText(index)"
            v-if="card.content && card.content.length > 50"
          >
            {{card.collapsed ? '...更多' : '收起'}}
          </text>
        </view>

        <!-- 发布时间 -->
        <view class="list-col time">
          <text class="publish-time">{{$common.formatWechatTime(card.create_time)}}</text>
        </view>

        <!-- 状态 -->
        <view class="list-col status">
          <view class="status-badge" :class="getStatusClass(card)" v-if="card.status != 1">
            {{getStatusText(card)}}
          </view>
		  
		  <view class="refresh-indicator" v-if="card.status == 1 && card.is_top==1">
		    <text class="indicator-dot"></text>
		    <text class="indicator-text">置顶中</text>
		  </view>
		  
          <view class="refresh-indicator" v-if="card.status == 1 && card.update">
            <text class="indicator-dot"></text>
            <text class="indicator-text">可刷新</text>
          </view>
        </view>

        <!-- 操作按钮 -->
        <view class="list-col actions">
          <view class="action-buttons">
            <!-- 审核操作 -->
            <view 
              class="action-btn audit" 
              v-if="card.status == 0"
              @tap="showAuditConfirm(index)"
            >
              <text class="action-icon">✓</text>
              <text class="action-text">审核</text>
            </view>
            <view 
              class="action-btn reject" 
              v-if="card.status == 0"
              @tap="showRejectConfirm(index)"
            >
              <text class="action-icon">✗</text>
              <text class="action-text">拒绝</text>
            </view>
            
            <!-- 刷新操作 -->
            <view 
              class="action-btn refresh" 
              v-if="card.status == 1 && card.update"
              @tap="card_update(index)"
            >
              <text class="action-icon">🔄</text>
              <text class="action-text">刷新</text>
            </view>
            
            <!-- 删除操作 -->
            <view class="action-btn delete" @tap="showDeleteConfirm(index)">
              <text class="action-icon">🗑️</text>
              <text class="action-text">删除</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-cards" v-if="cards.list.length === 0">
      <text class="empty-icon">📇</text>
      <text class="empty-text">暂无名片信息</text>
      <text class="empty-desc">当前没有找到名片数据</text>
    </view>

    <!-- 加载更多 -->
    <view class="load-more" v-if="cards.more && cards.list.length > 0">
      <text class="load-text">加载更多...</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cards: {
        list: [],
        more: false,
        nowPage: 0,
      },
      total: {
        totalCount: 0,
        viewCount: 0,
        stickyCount: 0,
        auditedCount: 0
      }
    }
  },
  created() {
    this.refreshPage();
  },
  methods: {
    // 刷新页面
    refreshPage() {
      this.card_GetlistTotal();
      this.card_Getlist(true);
    },

    // 加载名片统计
    card_GetlistTotal() {
      this.$common.get_request(
        {
          type: 'card_GetlistTotal',
          admin:1
        },
        (res) => {
          this.total = res;
        },
        () => {},
        false
      );
    },

    // 加载名片列表
    card_Getlist(IsUpdate) {
      var that = this
      if (IsUpdate != true && this.cards.more == false) {
        return;
      }
      if (IsUpdate == true) {
        that.cards.list = []
        that.cards.nowPage = 1;
      } else {
        that.cards.nowPage++;
      }

      that.$common.get_request(
        {
          type: 'card_Getlist',
          pages: that.cards.nowPage,
          admin: 1
        },
        (res) => {
          res.list.forEach((item, index) => {
            item.collapsed = true
            that.cards.list.push(item)
          });
          that.cards.more = res.more;
          uni.stopPullDownRefresh();
        },
        () => {
          uni.stopPullDownRefresh();
        },
        true
      );
    },

    // 切换文字展开/收起
    toggleText(index) {
      this.cards.list[index].collapsed = !this.cards.list[index].collapsed;
      this.$set(this.cards.list, index, this.cards.list[index]);
    },

    // 获取状态样式
    getStatusClass(card) {
      if (card.status == 0) return 'pending';
      if (card.status == 1) return 'approved';
      return 'rejected';
    },

    // 获取状态文本
    getStatusText(card) {
      if (card.status == 0) return '待审核';
      if (card.status == 1) return '已通过';
      return '已拒绝';
    },



    // 显示审核确认
    showAuditConfirm(index) {
      const card = this.cards.list[index];
      uni.showModal({
        title: '审核确认',
        content: `确定要通过"${card.username}"的名片审核吗？`,
        confirmColor: '#07c160',
        success: (res) => {
          if (res.confirm) {
            this.card_status(index, 1);
          }
        }
      });
    },

    // 显示拒绝确认
    showRejectConfirm(index) {
      const card = this.cards.list[index];
      uni.showModal({
        title: '拒绝确认',
        content: `确定要拒绝"${card.username}"的名片审核吗？`,
        confirmColor: '#ff4444',
        success: (res) => {
          if (res.confirm) {
            this.card_status(index, 2);
          }
        }
      });
    },

    // 审核名片
    card_status(index, status) {
      var that = this
      var card_id = that.cards.list[index].id
      that.$common.get_request(
        {
          type: 'card_status',
          card_id: card_id,
          status: status,
          admin:1
        },
        (res) => {
          that.cards.list[index].status = status;
          that.$set(that.cards.list, index, that.cards.list[index]);
          that.card_GetlistTotal();
          that.$common.showModal('成功', status == 1 ? '名片审核通过' : '名片审核拒绝');
        },
        () => {},
        true
      );
    },

    // 刷新名片
    card_update(index) {
      var that = this
      var card_id = that.cards.list[index].id
      that.$common.get_request(
        {
          type: 'card_update',
          card_id: card_id,
          admin:1
        },
        (res) => {
          that.cards.list[index].update = false;
          that.cards.list[index].create_time = res.create_time;
          that.$set(that.cards.list, index, that.cards.list[index]);
          that.$common.showModal('成功', '名片刷新成功');
        },
        () => {},
        true
      );
    },

    // 显示删除确认
    showDeleteConfirm(index) {
      const card = this.cards.list[index];
      uni.showModal({
        title: '删除确认',
        content: `确定要删除"${card.username}"的名片吗？`,
        confirmColor: '#ff4444',
        success: (res) => {
          if (res.confirm) {
            this.card_delete(index);
          }
        }
      });
    },

    // 删除名片
    card_delete(index) {
      var that = this
      var card_id = that.cards.list[index].id
      that.$common.get_request(
        {
          type: 'card_delete',
          card_id: card_id,
          admin:1
        },
        (res) => {
          that.cards.list.splice(index, 1)
          that.card_GetlistTotal()
          that.$common.showModal('成功', '名片删除成功');
        },
        () => {},
        true
      );
    }
  }
}
</script>

<style scoped>
.card-container {
  min-height: 100vh;
  background: #f8f9fa;
  padding: 24px;
  margin: 0 auto;
  width: 100%;
  max-width: 1400px;
  overflow: auto;
  height: 100%;
}

/* 页面头部 */
.card-header {
  margin-bottom: 24px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.header-left {
  flex: 1;
}

.page-title {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.page-desc {
  font-size: 14px;
  color: #666;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: auto;
}

.refresh-page-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #1890ff;
  color: white;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.refresh-page-btn:hover {
  background: #40a9ff;
  transform: translateY(-1px);
}

.refresh-icon {
  font-size: 16px;
}

.refresh-text {
  font-size: 14px;
}

.mini-stats {
  display: flex;
  gap: 24px;
}

.mini-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.mini-number {
  font-size: 16px;
  font-weight: 600;
  color: #24292e;
}

.mini-label {
  font-size: 12px;
  color: #6a737d;
}

/* 列表表头 */
.list-header {
  display: grid;
  grid-template-columns: 80px 200px 1fr 180px 120px 200px;
  background: white;
  padding: 16px 20px;
  border-radius: 8px 8px 0 0;
  border: 1px solid #e1e5e9;
  border-bottom: none;
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

.header-col {
  display: flex;
  align-items: center;
}

/* 名片列表 */
.cards-list {
  background: white;
  border-radius: 0 0 8px 8px;
  border: 1px solid #e1e5e9;
  border-top: none;
  margin-bottom: 32px;
}

.list-item {
  display: grid;
  grid-template-columns: 80px 200px 1fr 180px 120px 200px;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  align-items: center;
  transition: background 0.2s ease;
}

.list-item:hover {
  background: #fafbfc;
}

.list-item:last-child {
  border-bottom: none;
}

/* 列表列样式 */
.list-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 头像 */
.user-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #f0f0f0;
}

/* 用户信息 */
.user-nickname {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.4;
}

.user-wechat {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}

/* 介绍内容 */
.intro-text {
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  display: block;
}

.intro-text:not(.expanded) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.toggle-expand {
  display: inline-block;
  font-size: 12px;
  color: #1890ff;
  cursor: pointer;
  font-weight: 500;
}

.toggle-expand:hover {
  text-decoration: underline;
}

/* 发布时间 */
.publish-time {
  font-size: 13px;
  color: #666;
}

/* 状态 */
.status-badge {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  width: max-content;
}

.status-badge.pending {
  background: #fffbe6;
  color: #faad14;
  border: 1px solid #ffe58f;
}

.status-badge.approved {
  background: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.status-badge.rejected {
  background: #fff2f0;
  color: #ff4d4f;
  border: 1px solid #ffccc7;
}

.refresh-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.indicator-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #52c41a;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.indicator-text {
  font-size: 11px;
  color: #52c41a;
  font-weight: 500;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 6px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.action-btn.audit {
  background: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.action-btn.audit:hover {
  background: #d9f7be;
}

.action-btn.reject {
  background: #fff2f0;
  color: #ff4d4f;
  border: 1px solid #ffccc7;
}

.action-btn.reject:hover {
  background: #ffccc7;
}

.action-btn.refresh {
  background: #e6f7ff;
  color: #1890ff;
  border: 1px solid #91d5ff;
}

.action-btn.refresh:hover {
  background: #bae7ff;
}

.action-btn.view {
  background: #f6f8fa;
  color: #666;
  border: 1px solid #e1e5e9;
}

.action-btn.view:hover {
  background: #e1e5e9;
}

.action-btn.delete {
  background: #fff2f0;
  color: #ff4d4f;
  border: 1px solid #ffccc7;
}

.action-btn.delete:hover {
  background: #ffccc7;
}

.action-icon {
  font-size: 12px;
  font-weight: 600;
}

/* 空状态 */
.empty-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  background: white;
  border-radius: 12px;
  border: 2px dashed #e1e5e9;
  gap: 16px;
  text-align: center;
  margin-bottom: 32px;
}

.empty-icon {
  font-size: 64px;
  opacity: 0.5;
  margin-bottom: 8px;
}

.empty-text {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.empty-desc {
  font-size: 14px;
  color: #666;
  max-width: 300px;
}

/* 加载更多 */
.load-more {
  display: flex;
  justify-content: center;
  padding: 32px;
}

.load-text {
  font-size: 14px;
  color: #666;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .list-header,
  .list-item {
    grid-template-columns: 60px 150px 1fr 150px 100px 180px;
  }
  
  .list-header {
    padding: 12px 16px;
    font-size: 13px;
  }
  
  .list-item {
    padding: 16px;
  }
}

@media (max-width: 768px) {
  .card-container {
    padding: 16px;
  }
  
  .header-content {
    flex-direction: column;
    gap: 16px;
  }
  
  .header-actions {
    width: 100%;
    justify-content: space-between;
  }
  
  .list-header,
  .list-item {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .list-header {
    display: none;
  }
  
  .list-item {
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 16px;
  }
  
  .list-col {
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: center;
  }
  
  .list-col::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 13px;
    color: #666;
  }
  
  .list-col.avatar::before { content: "头像"; }
  .list-col.user::before { content: "用户信息"; }
  .list-col.intro::before { content: "介绍"; }
  .list-col.time::before { content: "发布时间"; }
  .list-col.status::before { content: "状态"; }
  .list-col.actions::before { content: "操作"; }
  
  .action-buttons {
    justify-content: flex-start;
  }
}
</style>